<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统配置</title>
    <link rel="stylesheet" href="style.css">
    <!-- Vue 3 CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 配置文件 -->
    <script src="config.js"></script>
</head>
<body>
    <div id="config-app">
        <div class="container">
            <div class="form-container">
                <h1 class="title">系统配置</h1>
                
                <!-- 导航链接 -->
                <div class="nav-links">
                    <a href="index.html" class="nav-link">📝 学生登记</a>
                    <a href="signin.html" class="nav-link">✓ 学生签到</a>
                    <a href="config.html" class="nav-link active">⚙️ 系统配置</a>
                </div>
                
                <form @submit.prevent="saveConfig" class="student-form">
                    <div class="form-group">
                        <label for="apiBaseUrl">API 服务器地址：</label>
                        <input 
                            type="text" 
                            id="apiBaseUrl" 
                            v-model="config.apiBaseUrl" 
                            placeholder="例如: https://xxx.ngrok-free.app 或 http://localhost:8080"
                            required
                            class="form-input"
                        >
                        <span class="hint">修改此地址可以连接到不同的后端服务器</span>
                    </div>

                    <div class="form-group">
                        <label for="studentRegister">学生登记 API 端点：</label>
                        <input 
                            type="text" 
                            id="studentRegister" 
                            v-model="config.endpoints.studentRegister" 
                            placeholder="/student/face"
                            required
                            class="form-input"
                        >
                    </div>

                    <div class="form-group">
                        <label for="studentSignIn">学生签到 API 端点：</label>
                        <input 
                            type="text" 
                            id="studentSignIn" 
                            v-model="config.endpoints.studentSignIn" 
                            placeholder="/sign-in/record"
                            required
                            class="form-input"
                        >
                    </div>
                    
                    <div class="form-group">
                        <button type="submit" class="submit-btn" :disabled="isSaving">
                            <span v-if="isSaving">保存中...</span>
                            <span v-else>保存配置</span>
                        </button>
                    </div>
                </form>
                
                <!-- 成功消息 -->
                <div v-if="successMessage" class="success-message">
                    {{ successMessage }}
                </div>

                <!-- 测试连接按钮 -->
                <div class="form-group" style="margin-top: 20px;">
                    <button @click="testConnection" class="camera-btn" :disabled="isTesting">
                        {{ isTesting ? '测试中...' : '测试后端连接' }}
                    </button>
                    <div v-if="testResult" class="test-result" :class="testResult.success ? 'success-message' : 'error-message'">
                        {{ testResult.message }}
                    </div>
                </div>

                <!-- 当前配置信息 -->
                <div class="signin-records" style="margin-top: 30px;">
                    <h2>当前配置</h2>
                    <div class="current-config">
                        <pre>{{ JSON.stringify(config, null, 2) }}</pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="config-ui.js"></script>
</body>
</html>
